<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        ES6模块化的好处
            异步加载、私密不漏、重名不怕、依赖不乱
     -->

    <!-- 注意ES6的模块化要将type设置为module -->
    <script type="module">
        // 如果引入的是通过export default导出的内容，可以自己定义名字，就像函数的形参一样，随你咋写。
        import mikaA1 from './1.js';

        //如果是引入的是普通的export没有default，则可以解构导入，不过要规规矩矩把属性名对应上, 如果想重命名，可以通过as关键字。这个重命名还是有用的，可以防止与别的引入重名
        import { name, age as myage } from './2.js';
        // 其实还有一个 * ，代表把文件中所有的export都引入, 我们这样写其实就相当于把export导出的当做export default去导入了
        import * as obj2 from './2.js';

        // 对于export和export default一起用的，我们可以这样引入，有大括号包的就是引入的export导出的东西，没有大括号包的引入的就是export default导出的东西
        import test, { name as name3, age as age3, sex } from './3.js'

        mikaA1();
        console.log('-------------------');
        console.log(name, myage);
        console.log('-------------------');
        console.log(name3, age3, sex, test);
    </script>
</body>

</html>